<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>支持参数的校验信息</title>
    <script type="text/javascript" src="../../../jquery.js"></script>
    <script type="text/javascript" src="../../../ui/om-core.js"></script>
    <script type="text/javascript" src="../../../ui/om-validate.js"></script>
    <script type="text/javascript" src="../../../ui/om-button.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../themes/default/om-all.css" />
    <link rel="stylesheet" type="text/css" href="../../common/css/demo.css" />
    <!-- view_source_begin -->
    <style type="text/css">
       label { width: 10em; float: left; }
       label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
         p { clear: both; }
      .submit { margin-left: 12em; }
        em { font-weight: bold; padding-right: 1em; vertical-align: top; }
        textarea{font-size: 15px;}
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
           $("#sendParamForm").validate({
        	   rules: {
        		   name: {
        			   rangelength: [5,10],
        			   required: true
        		   },
        		   email: {
        			   email: true,
        			   required: true
        		   },
        		   url: "url",
        		   comment: "required"
        	   },
        	   messages:{
        		   name:{
        			   //使用参数构造校验信息，这里的{0}对应5，{1}对应10
        		       rangelength: $.validator.format("请输入 {0} 到 {1} 个字符."),
        		       required: "必填，请输入正确的字符！"
        		   },
        		   email: {
        			   email: "请输入正确的email格式！",
        			   required: "必填，请输入正确的字符！"
        		   },
        		   url: "请输入正确的url地址！",
        		   comment : "必填，请输入正确的字符！"
        	   },
        	   submitHandler : function(){
                   alert('提交成功！');
                   $(this)[0].currentForm.reset()
                   return false;
               }
           });
        });
    </script>
    <!-- view_source_end -->
</head>
<body>
<!-- view_source_begin -->
    <form class="cmxform" id="sendParamForm" method="get" action="">
	   <p>
	     <label for="name">姓名：</label>
	     <em>*</em><input name="name" size="25"/>
	   </p>
	   <p>
	     <label for="email">电子邮箱：</label>
	     <em>*</em><input name="email" size="25"/>
	   </p>
	   <p>
	     <label for="url">个人主页：</label>
	     <em>&nbsp;&nbsp;</em><input name="url" size="25"/>
	   </p>
	   <p>
	     <label for="comment">个人简介：</label>
	     <em>*</em><textarea name="comment" cols="22"></textarea>
	   </p>
	   <p>
	     <input type="submit" value="提   交" class="submit"/>
	   </p>
	 </form>
	 <!-- view_source_end -->
	 <div id="view-desc">
       内置校验规则中有部分规则是支持传参的，如minlength、maxlength、min、max、range、还有示例演示的rangelength。<br/>
       其中前面四种规则支持传递一个参数，后面两种规则支持传递两个参数。具体各校验规则可以传几个参数，各参数是什么意义，请看此示例下面文档的“预览”中的表格里的说明。<br/>
       如rangelength支持两个参数，参数以数组的形式定义，定义校验信息时可以通过{0}...{n}格式获取参数。  
    </div>
</body>
</html>